<template>
    <div class="layout">
        <!--搜索-->
        <div class="header">
            <Header :we-chart="weChart" :update="update" @submit="submit" @changeLabel="changeLabel"></Header>
        </div>
        <!--基础数据-->
        <Browser
            v-if="boardData"
            class="browser"
            :board-data="boardData"
            :monment-data="monmentData"
            :we-chart="weChart"></Browser>
        <!--员工客户分享TOP10-->
        <shareTop v-show="weChart == 1" class="share" :staff-data="staffData" :customer-data="customerData"></shareTop>
        <!--饼状图-->
        <div class="pie">
            <BrowsingTime
                :browse-data="browseData"
                :tag-data="tagData"
                :thumbs-data="thumbsData"
                :comment-data="commentData"
                :monment-tag-data="monmentTagData"
                :we-chart="weChart"></BrowsingTime>
        </div>
        <!-- 浏览趋势 -->
        <LineChart
            :chart-data="chartData"
            :chart-time="chartTime"
            :moment-chart="momentChart"
            :monment-time="monmentTime"
            :we-chart="weChart"
            @chengeIndex="chengeIndex"
            @chengeId="chengeId"></LineChart>
        <!-- 素材中心Top10 -->
        <ListCard
            class="listCard"
            :top-content="topContent"
            :monment-top="monmentTop"
            :we-chart="weChart"
            @changeBtn="changeBtn"
            @changeIndex="changeIndex"></ListCard>
        <div class="table_container">
            <!-- 详细数据 -->
            <Table
                class="table"
                :info-data="infoData"
                :data-infos="dataInfos"
                :we-chart="weChart"
                @exportData="exportData"
                @SortData="sortData"></Table>
            <!-- 分页 -->
            <ZWPagination @pageSizeChange="pageSizeChange" @pageChange="pageChange"></ZWPagination>
        </div>
    </div>
</template>

<script setup lang="ts">
import Header from './components/Header.vue';
import Browser from './components/Browse.vue';
import BrowsingTime from './components/BrowsingTime.vue';
import LineChart from './components/LineChart.vue';
import ListCard from './components/ListCard.vue';
import shareTop from './components/shareTop.vue';
import Table from './components/Table.vue';
import ZWPagination from './components/ZWPagination.vue';
import { getTime } from '@/api/board';
import { getDay } from '@/utils/utils';
import { store, useStore } from '@/store';
import { ref, reactive, onMounted, computed, watch } from 'vue';
import {
    boardBasic,
    boardBrowse,
    boardTag,
    basicChart,
    contentTop,
    dataInfo,
    exportDatas,
    momentBasic,
    monentBrowse,
    monmentTag,
    momentBasicChart,
    momentTop,
    monmentDatas,
    exportMonmentData,
    custTop,
    staffTop
} from '@/api/board';
const boardData = ref({}); //基础数据
const browseData = ref([]); //浏览时间段
const tagData = ref([]); //标签占比
const chartData = ref([]); //浏览趋势
const chartTime = ref([]); //时间
const topContent = ref([]); //top10
const infoData = ref([]); //详细数据
const monmentData = ref({}); //朋友圈基本数据
const thumbsData = ref([]); //点赞列表
const commentData = ref([]); //评论列表
const monmentTagData = ref([]); //朋友圈标签占比
const momentChart = ref([]); //朋友圈趋势
const monmentTime = ref([]); //朋友圈时间
const monmentTop = ref([]); //朋友圈top10
const dataInfos = ref([]); //朋友圈详细数据
const staffData = ref([]); //员工分享top10
const customerData = ref([]); //客户分享top10
const params = reactive({
    filter_time: [],
    content_type: ''
});

const chartType = ref(1); //浏览趋势1浏览人数2浏览次数3浏览时长
const contentType = ref(1); //素材top101浏览人数2浏览次数3浏览时长
const momentType = ref(1); //朋友圈趋势1-点赞 2-评论数 3-评论人数
const conmentChart = ref(1); //素材top101-点赞 2-评论数 3-评论人数
const weChart = ref(1);
const update = ref();
const pageInfo = {
    page: 1,
    page_size: 15
};
const paramsInfoData = reactive({
    sort: 'DESC',
    sort_filed: 'view_people'
});
const paramsFriendData = reactive({
    sort: 'DESC',
    sort_filed: 'like_num'
});
//获取更新时间
const getLataTime = () => {
    getTime({
        census_module: weChart.value == 1 ? 1 : 2
    }).then((res: any) => {
        update.value = res?.date_updated_at;
    });
};
getLataTime();
//切换素材or朋友圈
const changeLabel = (data: any) => {
    weChart.value = data;
    if (weChart.value == 1) {
        //获取素材基础数据
        getBasic();
        //浏览时间段占比
        getBrowse();
        //客户标签占比
        getTag();
        //浏览趋势
        getChart();
        //素材中心TOP
        getTop();
        //详细数据
        getInfo();
        getLataTime();
        getStaffTop();
        getCustTop();
    } else {
        //朋友圈
        getContentBasic();
        getMonment(1);
        getMonment(2);
        getMonmentTag();
        getMomentBasicChart();
        getMonmentTop();
        getMonmentDatas();
        getLataTime();
    }
};
//素材基础数据
const getBasic = () => {
    boardBasic(params).then((data: any) => {
        boardData.value = data;
    });
};
// getBasic()
//-------------朋友圈相关接口---------------
//朋友圈基础数据
const getContentBasic = () => {
    const paramsData = {
        filter_time: params.filter_time
    };
    momentBasic(paramsData).then((data: any) => {
        monmentData.value = data;
    });
};
// getContentBasic()
//朋友圈点赞和评论占比数据
const getMonment = (val: number) => {
    const dataParams = {
        type: val,
        filter_time: params.filter_time
    };
    const thumbsInData: any = [];
    const commentInData: any = [];
    monentBrowse(dataParams).then((data: any) => {
        if (val == 1) {
            if (data.ratio) {
                data.ratio.forEach((item: any) => {
                    thumbsInData.push({
                        name: data.time_type[item.time_type],
                        value: item.data
                    });
                });
                thumbsData.value = thumbsInData;
            } else {
                thumbsData.value = [];
            }
        } else {
            if (data.ratio) {
                data.ratio.forEach((item: any) => {
                    commentInData.push({
                        name: data.time_type[item.time_type],
                        value: item.data
                    });
                });
                commentData.value = commentInData;
            } else {
                commentData.value = [];
            }
        }
    });
};
//type==1点赞 type==2评论
// getMonment(1)
// getMonment(2)
//朋友圈标签占比
const getMonmentTag = () => {
    const dataParams = {
        filter_time: params.filter_time
    };
    const monmentInTagData: any = [];
    monmentTag(dataParams).then((data: any) => {
        if (data) {
            data.forEach((item: any) => {
                monmentInTagData.push({
                    value: item.cnt,
                    name: item.cust_tag_name,
                    id: item.cust_tag_id
                });
            });
            monmentTagData.value = monmentInTagData;
        } else {
            monmentTagData.value = [];
        }
    });
};
// getMonmentTag()
//朋友圈折线图
const getMomentBasicChart = () => {
    const dataParams = {
        filter_time: params.filter_time
    };
    const timer: any[] = [];
    const dataer: any[] = [];
    momentBasicChart(dataParams).then((data: any) => {
        if (momentType.value == 1) {
            if (data.length > 0) {
                data.forEach((item: any) => {
                    dataer.push(item.like_num);
                    timer.push(item.time);
                });
                momentChart.value = dataer;
                monmentTime.value = timer;
            }
        } else if (momentType.value == 2) {
            if (data.length > 0) {
                data.forEach((item: any) => {
                    dataer.push(item.comment_per_num);
                    timer.push(item.time);
                });
                momentChart.value = dataer;
                monmentTime.value = timer;
            }
        } else {
            if (data.length > 0) {
                data.forEach((item: any) => {
                    dataer.push(item.comment_user_num);
                    timer.push(item.time);
                });
                momentChart.value = dataer;
                monmentTime.value = timer;
            }
        }
    });
};
//朋友圈TOP10
const getMonmentTop = () => {
    const dataParams = {
        filter_time: params.filter_time,
        type: conmentChart.value //1-点赞 2-评论数 3-评论人数
    };
    momentTop(dataParams).then((data: any) => {
        monmentTop.value = data;
    });
};
//朋友圈详细数据
const getMonmentDatas = () => {
    const dataParams = {
        filter_time: params.filter_time,
        page: pageInfo.page,
        page_size: pageInfo.page_size,
        sort: paramsFriendData.sort,
        sort_filed: paramsFriendData.sort_filed
    };
    monmentDatas(dataParams).then((data: any) => {
        store.dispatch('pageTotal', data.total);
        dataInfos.value = data.data;
    });
};
// getMonmentDatas()
//获取朋友圈趋势搜索
const chengeId = (data: any) => {
    momentType.value = data;
    getMomentBasicChart();
};
//获取素材top10
const changeIndex = (data: any) => {
    conmentChart.value = data;
    getMonmentTop();
};
//-----朋友圈接口结束-------------------------
const changeDate = (data: any) => {
    if (weChart.value == 1) {
        getBasic();
        getBrowse();
        getTag();
        getChart();
        getTop();
        getInfo();
        getStaffTop();
        getCustTop();
    } else {
        //朋友圈
        getContentBasic();
        getMonment(1);
        getMonment(2);
        getMonmentTag();
        getMomentBasicChart();
        getMonmentTop();
        getMonmentDatas();
    }
};
//提交查询
const submit = (data: any) => {
    params.content_type = data.users;
    params.filter_time = data.filter_time;
    if (!data.date1) {
        changeDate(data.currentId);
    } else {
        params.filter_time = data.filter_time;
        changeDate('0');
    }
};
//获取浏览时间段数据
const getBrowse = () => {
    const browseInData: any = [];
    boardBrowse(params).then((data: any) => {
        if (data.ratio) {
            data.ratio.forEach((item: any) => {
                browseInData.push({
                    name: data.time_type[item.time_type],
                    value: parseInt(item.data)
                });
            });
            browseData.value = browseInData;
        } else {
            browseData.value = [];
        }
    });
};
// getBrowse()
//获取客户标签占比
const getTag = () => {
    const tagInData: any = [];
    boardTag(params).then((data: any) => {
        if (data) {
            data.forEach((item: any) => {
                tagInData.push({
                    value: item.cnt,
                    name: item.cust_tag_name,
                    id: item.cust_tag_id
                });
            });
            tagData.value = tagInData;
        } else {
            tagData.value = [];
        }
    });
};
// getTag()
//获取浏览趋势的搜索
const chengeIndex = (data: any) => {
    chartType.value = data;
    getChart();
};
//浏览趋势
const getChart = () => {
    const dataParams = {
        content_type: params.content_type,
        filter_time: params.filter_time,
        type: chartType.value
    };
    const timer: any[] = [];
    const dataer: any[] = [];
    basicChart(dataParams).then((data: any) => {
        if (data.length > 0) {
            data.forEach((item: any) => {
                timer.push(item.time);
                if (chartType.value == 3) {
                    const time = dataer.push(item.data);
                    return;
                }
                dataer.push(item.data);
            });
        }
        chartTime.value = timer;
        chartData.value = dataer;
        //refreshKey()
    });
};
// getChart()
//获取top10搜索
const changeBtn = (data: any) => {
    contentType.value = data;
    getTop();
};
//获取素材中心TOP10
const getTop = () => {
    const dataParams = {
        content_type: params.content_type,
        filter_time: params.filter_time,
        type: contentType.value
    };
    contentTop(dataParams).then((data: any) => {
        topContent.value = data;
    });
};
// getTop()
//排序
const sortData = (params: any) => {
    if (weChart.value == 1) {
        paramsInfoData.sort_filed = params.prop;
        paramsInfoData.sort = params.sort;
        getInfo();
    } else {
        paramsFriendData.sort_filed = params.prop;
        paramsFriendData.sort = params.sort;
        getMonmentDatas();
    }
};
//获取详细数据
const getInfo = () => {
    const dataParams = {
        content_type: params.content_type,
        filter_time: params.filter_time,
        page_size: pageInfo.page_size,
        page: pageInfo.page,
        type: contentType.value,
        sort: paramsInfoData.sort,
        sort_filed: paramsInfoData.sort_filed
    };
    dataInfo(dataParams).then((data: any) => {
        store.dispatch('pageTotal', data.total);
        infoData.value = data.data;
    });
};
//客户分享TOP10
const getCustTop = () => {
    const paramsData = {
        content_type: params.content_type,
        filter_time: params.filter_time
    };
    custTop(paramsData).then((res: any) => {
        customerData.value = res;
    });
};
//员工分享TOP10
const getStaffTop = () => {
    const paramsData = {
        content_type: params.content_type,
        filter_time: params.filter_time
    };
    staffTop(paramsData).then((res: any) => {
        staffData.value = res;
    });
};
// getInfo()
//导出详细数据
const exportData = () => {
    if (weChart.value == 1) {
        const dataParams = {
            content_type: params.content_type,
            filter_time: params.filter_time,
            type: contentType.value,
            sort: paramsInfoData.sort,
            sort_filed: paramsInfoData.sort_filed
        };
        exportDatas(dataParams).then((data: any) => {
            window.open(data.url);
        });
    } else {
        //导出朋友圈详细数据
        const dataParams = {
            filter_time: params.filter_time,
            sort: paramsFriendData.sort,
            sort_filed: paramsFriendData.sort_filed //排序字段 like_num 点赞数 comment_per_num 评论数 comment_user_num 评论人数
        };
        exportMonmentData(dataParams).then((data: any) => {
            window.open(data.url);
        });
    }
};
//切换页数
const pageChange = (val: any) => {
    pageInfo.page = val.page;
    if (weChart.value == 1) {
        getInfo();
    } else {
        getMonmentDatas();
    }
};
//切换每页数
const pageSizeChange = (val: any) => {
    pageInfo.page_size = val.page_size;
    pageInfo.page = 1;
    if (weChart.value == 1) {
        getInfo();
    } else {
        getMonmentDatas();
    }
};
</script>

<style lang="scss" scoped>
.layout {
    box-sizing: border-box;

    .browser {
        margin: 16px 0;
    }

    .pie {
        margin-bottom: 16px;
    }

    .listCard {
        margin: 16px 0;
    }

    .share {
        margin-top: 16px;
    }

    .table_container {
        border: 1px solid #eaeaea;
        background-color: #fff;

        .el-pagination {
            padding: 0 24px 16px;
        }
    }
}
</style>
